<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-data-table
			ref="table"
			id="landReportWechat"
			v-bind="table"
			:data="list"
			:loading="loading"
			auto-page
			full
		>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								@change="refresh"
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
								@change="refresh"
							/>
						</cl-filter>
						<!-- <cl-filter label="类型">
							<cl-select
								v-model="search.type"
								placeholder="请选择"
								clearable
								filterable
								@change="refresh"
							>
								<el-option label="全部" value="" />
								<el-option label="落地页" :value="1" />
								<el-option label="城市" :value="2" />
							</cl-select>
						</cl-filter> -->
						<cl-filter label="广告账户ID">
							<el-input
								v-model="search.supplie_id"
								placeholder="请输入广告账户ID"
								@change="refresh"
								clearable
							/>
						</cl-filter>
						<cl-filter label="推广人">
							<cl-select
								v-model="search.user_id"
								placeholder="请选择"
								filterable
								@change="refresh"
								clearable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in userList"
									:key="item.user_id"
									:label="item.user_name"
									:value="item.user_id"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle
						:columns="initColumns"
						:print="printParams"
						v-model="table.columns"
						@export-file="exportExcel"
					/>
				</el-row>
			</template>

			<cl-empty slot="empty" />
			<template #column-opt="{ scope: { row } }">
				<el-button type="primary" @click="summary(row)"> 汇总 </el-button>
			</template>
			<!-- 数据表格 -->
			<!-- <cl-table id="landReportWechat" v-bind="table">
			</cl-table> -->
		</cl-data-table>
	</cl-crud>
</template>

<script>
import dayjs from "dayjs";
import { exportExcelCoustom } from "@/utils/excel";
export default {
	name: "WideLandingReportWechat",
	inject: ["parent"],
	data() {
		return {
			printParams: {
				id: "landReportWechat",
				popTitle: "账号报表"
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [],
				showSummary: true,
				summaryMethod: () => {
					return this.summariesArr;
				},
				showPage: true,
				limit: 20
			},
			loading: false,
			list: [],
			summariesArr: [],
			initColumns: [
				{ label: "#", prop: "ranking", width: 50, disable: true, fixed: true },
				{ label: "推广人", prop: "user_name"},
				{
					label: "账户名称",
					prop: "advertiser_name",
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "账户ID",
					prop: "advertiser_id",
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "项目ID",
					prop: "projectid",
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "计划ID",
					prop: "promotionid",
					align: "left",
					showOverflowTooltip: true
				},
				// { label: "加微类型", prop: "join_type", width: 200 },
				// {
				// 	label: "加微号",
				// 	prop: "join_num",
				// 	minWidth: 100,
				// 	align: "left",
				// 	showOverflowTooltip: true
				// },
				// {
				// 	label: "客服",
				// 	prop: "user_name",
				// 	minWidth: 100,
				// 	align: "left",
				// 	showOverflowTooltip: true
				// },
				// { label: "点击数", prop: "statistics_num", width: 100 },
				// { label: "行为数", prop: "behavior_num", width: 100 },
				// { label: "行为率", prop: "behavior_rate", width: 100 },
				{ label: "加微数", prop: "number", sortable: true},
				{ label: "定金数(加微日期)", prop: "deposit_num", sortable: true},
				{ label: "定金数(上报日期)", prop: "today_pay_deposit", sortable: true},
				{ label: "预约率", prop: "add_wei_rate", sortable: true }
				// { label: "新客业绩(￥)", prop: "achieve_num", width: 120 },
				// { label: "最近加微日期", prop: "addtime", width: 150 },
				// { label: "操作", prop: "opt", width: 100, disable: true, fixed: "right" }
			],
			search: {
				biz_id: "", //分公司id
				bra_id: [], //品牌
				user_id: "", // 推广人员
				supplie_id: "", // 广告账户id
				date: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
				begin_time: "", //开始时间
				end_time: "", //结束时间
				type: ""
			},
			userList: []
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		const { initColumns } = this;
		this.search.biz_id = this.getCurrBiz();
		this.init();
		this.table.columns = initColumns;
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad)
				.set("dict", {
					api: {
						page: "adreport"
					}
				})
				.done();
			app.refresh(this.search);
		},
		async onRefresh(params, { next, render }) {
			this.loading = true;
			let data = await next(params).finally(() => {
				this.loading = false;
			});
			data =
				data?.map((e, index) => {
					return {
						...e,
						ranking: index + 1
					};
				}) || [];
			this.list = data;

			this.getSummaries({ columns: this.table.columns, data });
			render(data);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		// 导出
		exportExcel() {
			exportExcelCoustom("加微方式报表", this.list, this.table.columns, this.summariesArr);
		},
		// 汇总
		summary(row = {}) {
			const { biz_id } = this.search;
			this.parent.openStatistics({ ...row, biz_id });
		},
		// 表格合计
		getSummaries({ columns, data }) {
			let statistics_num = 0;
			let behavior_num = 0;
			let wx_num = 0;
			let deposit_num = 0;
			let today_pay_deposit = 0;

			let sumCols = [
				"statistics_num",
				"behavior_num",
				"number",
				"deposit_num",
				"achieve_num",
				"behavior_rate",
				"add_wei_rate",
				"today_pay_deposit"
			];
			const newArr = columns.map((column, index) => {
				let prop = column.prop;
				if (index === 0) {
					return "合计";
				}
				if (!sumCols.includes(prop)) return "";
				if (prop == "behavior_rate") {
					return this.toFixed(behavior_num / statistics_num) + "%";
				}
				if (prop == "add_wei_rate") {
					return this.toFixed(deposit_num / wx_num) * 100 + "%";
				}
				const values = data.map(item => Number(item[prop]));
				let sum = this.toFixed(
					values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						}
						return prev;
					}, 0)
				);
				if (prop == "statistics_num") {
					statistics_num = sum;
				}
				if (prop == "behavior_num") {
					behavior_num = sum;
				}
				if (prop == "number") {
					wx_num = sum;
				}
				if (prop == "deposit_num") {
					deposit_num = sum;
				}
				if (prop == 'today_pay_deposit') {
					today_pay_deposit = sum;
				}
				return sum;
			});

			this.summariesArr = newArr;
			return newArr;
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.initData();
		},
		initData() {
			this.getUserList();
		},
		// 事业部切换
		changeBiz() {
			this.search.user_id = "";
			this.search.bra_id = [];
			this.init();
			this.refresh();
		},
		// 人员列表
		async getUserList() {
			const { biz_id } = this.search;
			this.userList = [];
			if (!biz_id) return;
			const data = await this.$service.user.deptuserlists({
				biz_id,
				post: 4,
				manage_user: 1
			});
			this.userList = data;
		}
	}
};
</script>

<style lang="scss" scoped></style>
